<template>
  <div id="kz">
    <el-carousel :interval="1800" type="card" height="500px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <el-button @click="jumper" type="primary" size="mini">上报</el-button>

    <div class="kzDiv">
      <el-table
        size="mini"
        class="tableDiv"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            <div :class="tableData[scope.$index + 1]">
              {{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="country" label="国">
        </el-table-column>
        <el-table-column align="center" prop="province" label="省">
        </el-table-column>
        <el-table-column align="center" prop="city" label="市">
        </el-table-column>
        <el-table-column align="center" prop="area" label="区">
        </el-table-column>
        <el-table-column align="center" prop="confirmed" label="新增确诊">
        </el-table-column>
        <el-table-column align="center" prop="suspected" label="疑似">
        </el-table-column>
        <el-table-column align="center" prop="dead" label="死亡">
        </el-table-column>
        <el-table-column align="center" prop="cure" label="治愈">
        </el-table-column>
        <el-table-column align="center" prop="severe" label="重症">
        </el-table-column>
        <el-table-column align="center" prop="outside" label="境外输入">
        </el-table-column>
        <el-table-column
          align="center"
          prop="inputTime"
          label="上报时间"
          width="300"
          >{{ moment(tableData.inputTime).format("YYYY-MM-DD HH:mm:ss") }}
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>







<script>
import axios from "../utils/request";
let moment = require("moment");
import { regionData } from "element-china-area-data";

export default {
  data() {
    return {
      id: "",
      tableData: [],
      pageParam: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  methods: {
    jumper() {
      this.$router.push({ name: "Map" });
    },
    moment,
    async findEpidemic() {
      let res = await axios.get("/epidemic/pageQuery", {
        params: this.pageParam,
      });
      console.log(res);
      this.tableData = res.data.list;
      //   this.id = res.data.kz.id.reverse();
    },
  },
  created() {
    this.findEpidemic();
  },
  mounted() {},
};
</script>




<style scoped>
#kz {
  height: 6000px;
  background: url("../utils/bei.jpg") no-repeat;
  background-attachment: fixed;
}
.kzDiv {
  margin-top: 30px;
}
.tableDiv {
  font-size: 24px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;

  background: url("../utils/l1.jpg") no-repeat;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  background: url("../utils/l2.jpg") no-repeat;
  border-radius: 10px;
  background-size: 100% 100%;
}
</style>